// post.js

import React, { Component } from "react";
import PostEditor from './post_editor';
import PostView from './posts_view';
import CommentList from './comment_list';
import { get, put, post } from '../utils/request';
import url from '../utils/url';
import './post.css';
import { useMatch, useParams } from 'react-router-dom';

function withMore(Component) {
    return (props) => <Component {...props} params={useParams()} />;
}

class Post extends Component {
    constructor(props) {
        super(props);
        this.state = {
            post: null,
            comments: [],
            editing: false
        };
        this.handleEditClick = this.handleEditClick.bind(this);
        this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
        this.handlePostSave = this.handlePostSave.bind(this);
        this.handlePostCancel = this.handlePostCancel.bind(this);
        this.refreshComments = this.refreshComments.bind(this);
        this.refreshPost = this.refreshPost.bind(this);
    }

    componentDidMount() {
        this.refreshPost();
        this.refreshComments();
    }

    refreshPost() {
        const postId = this.props.params.id;
        get(url.getPostById(postId)).then(data => {
            if (!data.error) {
                this.setState({
                    post: data
                });
            }
        });
    }

    refreshComments() {
        const postId = this.props.params.id;
        get(url.getCommentList(postId)).then(data => {
            if (!data.error) {
                this.setState({
                    comments: data
                });
            }
        });
    }

    handleEditClick() {
        this.setState({
            editing: true
        });
    }

    handlePostSave(data) {
        const id = this.props.match.params.id;
        this.savePost(id, data);
    }

    handlePostCancel() {
        this.setState({
            editing: false
        });
    }

    handleCommentSubmit(content) {
        const id = this.props.match.params.id;
        const comment = {
            author: this.props.userId,
            post: id,
            content: content
        };
        this.saveComment(comment);
    }

    saveComment(comment) {
        post(url.createComment(), comment).then(data => {
            if (!data.error) {
                this.refreshComments();
            }
        });
    }

    savePost(id, post) {
        put(url.updatePost(id), post).then(data => {
            if (!data.error) {
                const newPost = { ...data, author: this.state.post.author };
                this.setState({
                    post: newPost,
                    editing: false
                });
            }
        });
    }

    render() {
        const { post, comments, editing } = this.state;
        const { userId } = this.props;
        if (!post) {
            return null;
        }
        const editable = userId === post.post_info.author.user_id;

        return (
            <div className="post">
                {editing ? (
                    <PostEditor post={post}
                                onSave={this.handlePostSave}
                                onCancel={this.handlePostCancel}
                    />
                ) : (
                    <PostView posts={[post]}
                              editable={editable}
                              onEditClick={this.handleEditClick}
                    />
                )}
                <CommentList comments={comments}
                             editable={editable}
                             onSubmit={this.handleCommentSubmit}
                />
            </div>
        );
    }
}

export default withMore(Post);
